<!-- 区域的组件 -->
<template>
  <el-row>
    <el-card class="box-card">
      <el-tabs
        v-model="widget.options.activeName"
        :stretch="widget.options.stretch"
        :type="widget.options.tabsType"
        :tab-position="widget.options.tabPosition"
      >
        <el-tab-pane
          v-for="(item, tabIndex) in widget.options.options"
          :key="tabIndex"
          :name="item.value"
          :label="item.value"
        >
          <div v-for="(column, index) in columns[tabIndex]" :key="column.key">
            <el-col
              :span="column.options !== undefined && column.options.span"
              class="drag-widget field-item"
            >
              <div v-if="column.model">
                <el-form-item
                  :label="column.name"
                  :prop="widget.model + '.' + tabIndex + '.' + column.model"
                  :rules="column.rules ? column.rules : []"
                  :class="{ is_req: column.options.required, display: 'block' }"
                >
                  <GenerateElementItem
                    :blanks="blanks"
                    is-table="block"
                    :path="widget.model + '.' + tabIndex + '.' + column.model"
                    v-model="value[tabIndex][column.model]"
                    :models_temp="models_temp"
                    :widget="column"
                    :remote="remote"
                    :models.sync="dataModels"
                    :strutAll="strutAll"
                    :index="2"
                  >
                  </GenerateElementItem>
                </el-form-item>
              </div>
            </el-col>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </el-row>
</template>

<script>
import { verification } from "../../router/verification.js";

function isInArray(arr, value) {
  for (var i = 0; i < arr.length; i++) {
    if (value === arr[i]) {
      return true;
    }
  }
  return false;
}
export default {
  components: {
    GenerateElementItem: () => import("../../GenerateElementItem.vue")
  },
  props: [
    "columns",
    "value",
    "models",
    "remote",
    "blanks",
    "models_temp",
    "widget",
    "strutAll",
    "data",
    "path",
    "tabIndex"
  ],
  data() {
    //console.log(this.columns[0].options.defaultValue);
    return {
      tableData: this.value,
      dataModels: this.models,
      checkedCities: [],
      dialogVisible: false
    };
  },
  created() {
    var tableColumns = this.widget.tabColumns;
    for (var i = 0; i < tableColumns.length; i++) {
      for (var j = 0; j < tableColumns[i].length; j++) {
        if (tableColumns[i][j].rules) {
          for (var k = 0; k < tableColumns[i][j].rules.length; k++) {
            tableColumns[i][j].rules[k].validator = this.validatePass;
          }
        }
      }
    }
  },
  methods: {
    handleClick(tab, event) {
      var index = tab.index;
    },
    validatePass(rule, info, callback) {
      verification(rule, info, callback, this);
    },
    handleAddRow() {
      var dataModels = this.dataModels;
      let item = {};
      if (this.columns !== undefined) {
        if (this.columns.length > 0) {
          for (let i = 0; i < this.columns.length; i++) {
            item[this.columns[i].model] = "";
          }
        }
      }
      this.tableData.push(item);
    },
    handleRemove(index) {
      this.tableData.splice(index, 1);
    },
    isInArray(arr, value) {
      for (var i = 0; i < arr.length; i++) {
        if (value === arr[i]) {
          return true;
        }
      }
      return false;
    },
    handleImport() {},
    handleClose() {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleCheckedCitiesChange(value) {
      this.checkedCities = value;
    }
  },
  watch: {}
};
</script>

<style lang="scss">
.row-bd {
  border: 1px solid #ebeef5;
  padding-top: 12px;
}
.addRow {
  display: block !important;
  margin-top: 18% !important;
}
.is_req {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
</style>
